<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>mp.ui.Pane</title>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/pane.css">
  <style>
    fieldset {
      padding: 10px;
      border: 1px solid #369;
    }

    .goog-pane-content {
      height: 9em;
      margin: 0;
      border: 1px solid #6b90da;
      border-top: 0;
      padding: 4px 8px;
      background: #fff;
      overflow: auto;
    }
  </style>
  <script src="../../vendor/closure-library/closure/goog/base.js"></script>
  <script src="../deps.js"></script>
  <script>
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.Logger');
    goog.require('goog.debug.Logger.Level');
    goog.require('goog.debug.LogManager');
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.object');
    goog.require('goog.ui.Component.EventType');
    goog.require('mp.ui.Pane');
  </script>
</head>
<body>
  <h1>mp.ui.Pane</h1>
  <p>
    A <b>mp.ui.Pane</b> is a subclass of <b>goog.ui.Container</b>,
    designed to host one or more <b>goog.ui.Control</b>s.  The items in the
    first four panes on this demo page were decorated using the default
    pane renderer.
  </p>
  <table border="0" cellpadding="0" cellspacing="10" width="100%">
    <tbody>
      <tr valign="top">
        <td width="50%">
          <b>Pane:</b><br><br>
          <div id="pane" class="mp-pane">
            <div class="goog-control goog-control-selected">Hello</div>
            <div class="goog-control">Settings</div>
            <div class="goog-control">More</div>
            <div class="goog-control goog-control-disabled">Advanced</div>
          </div>
          <label>
            Change view
            <select id="chng_view">
                <option value="tile">tile</option>
                <option value="grid">grid</option>
                <option value="list">list</option>
            </select>
          </label>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <!-- Event log. -->
          <fieldset class="goog-debug-panel">
            <legend>Event Log</legend>
            <div id="log"></div>
          </fieldset>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <div id="perf"></div>
  <script>
      var timer = goog.now();
      // Set up a logger.
      goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
      var logger = goog.debug.Logger.getLogger('demo');
      var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
      logconsole.setCapturing(true);
      var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
      logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
      function logEvent(e) {
          var source =
            typeof e.target.getCaption == 'function' && e.target.getCaption() ||
            e.target.getId();
          logger.info('"' + source + '" dispatched: ' + e.type);
      }
      var pane1 = new mp.ui.Pane();
      pane1.decorate(goog.dom.getElement('pane'));
      goog.array.forEach([pane1],
          function (pane) {
              // Log all events.
              goog.events.listen(pane, EVENTS, logEvent);
              // Handle SELECT events dispatched by tabs.
              goog.events.listen(pane, goog.ui.Component.EventType.SELECT,
              function (e) {
                  var itemSelected = e.target;
                  var contentElement = goog.dom.getElement(pane.getId() +
                    '_content');
                  goog.dom.setTextContent(contentElement,
                    'You selected the "' + itemSelected.getIndex() + '" item.');
              });

              // Hook up the "change view" checkbox.
              goog.events.listen(goog.dom.getElement('chng_view'),
              goog.events.EventType.CHANGE,
              function (e) {
                  var select = e.target;
                  pane.setView(select.value);
              });
          });
      goog.dom.setTextContent(goog.dom.getElement('perf'),
          (goog.now() - timer) + 'ms');
  </script>
</body>
</html>
